<template>
  <el-form
    :model="ruleForm"
    ref="ruleForm"
    class="demo-ruleForm"
  >
    <el-form-item label="" prop="usernam" name="username"
      ><el-input
        type="text"
        autocomplete="off"
        v-model="ruleForm.username"
        prefix-icon="el-icon-user-solid"
        placeholder="请输入用户名"
      ></el-input
    ></el-form-item>
    <el-form-item label="" prop="nickname" name="nickname"
      ><el-input
        type="text"
        autocomplete="off"
        v-model="ruleForm.nickname"
        prefix-icon="el-icon-user-solid"
        placeholder="请输入昵称"
      ></el-input
    ></el-form-item>
    <el-form-item label="" prop="passward" name="passward"
      ><el-input
        type="password"
        autocomplete="off"
        v-model="ruleForm.passward"
        prefix-icon="el-icon-lock"
        placeholder="请输入密码"
      ></el-input
    ></el-form-item>
    <!-- <el-form-item label="" prop="checkPass"
      ><el-input
        type="password"
        autocomplete="off"
        v-model="ruleForm.checkPass"
        prefix-icon="el-icon-lock"
        placeholder="请输入密码"
      ></el-input
    ></el-form-item> -->
    <el-form-item class="btns">
      <el-button type="primary" @click="register">注册</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
  </el-form>
</template>
 
<script>
 import Axios from 'axios';
import qs from 'qs';
export default {
  data() {
    return {
      activeName: "second",
      ruleForm: {
        username: "",
        passward: "",
        nickname:"",
        // checkPass: "",
      },
    };
  },
 
  methods: {
     register(){
     Axios.post('/register',qs.stringify({
       username:this.ruleForm.username,
       password:this.ruleForm.passward,
       nickname:this.ruleForm.nickname,
     }))
     .then(res=>{
       console.log(res)
       if(res.data.state == 1){
         alert(res.data.msg)
       }
       else{
         alert(res.data.msg)
       }
     })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

  },

}//method结尾


</script>

<style scoped lang="less">
.btns {
      display: flex;
      justify-content: flex-end;
    }
</style>